<template lang="pug">
.judge
    headBox(:title="'茶馆'" :type="1")
    .ju-tab
        .ju-item(:class="{active: cur ==i }" v-for='(d,i) in list' :key="i" @click="cur = i")
            p {{d}}
    judegList(:list="judeg" @onLi="onLi($event)")
    
            
</template>
<script>
import headBox from "@/components/head.vue"
import judegList from "./judegList"
export default {
    components: {
        headBox,
        judegList
    },
    data () {
        return {
            list: ['综合','人气','距离'],
            judeg: [
                {
                    title: "人人茶馆 (宝安店)",
                    km: '1982.1km'
                },
                {
                    title: "人人茶馆 (龙岗店)",
                    km: '1953.3km'
                },
                {
                    title: "人人茶馆 (南山店)",
                    km: '1957.1km'
                },
                {
                    title: "人人茶馆",
                    km: '1979.1km'
                }
            ],
            cur: 0
        }
    },
    methods: {
        onLi(i){
            this.$router.push({
                path: '/judgeBox',
                query:{
                    id: i
                }
            })
        }
    }
    
}
</script>
<style scoped lang="sass">
.ju-tab
    display: flex
    .ju-item
        width: 33.33%
        border-bottom: 1px solid #efefef
        p
            margin: .22rem 0
            line-height: .44rem
            font-size: .22rem
            color: #8f8f8f
            text-align: center
        & + .ju-item  p
            border-left: 2px solid #e3e3e3
        &.active
            color: #2b2b2b
            border-bottom: .04rem solid #2b2b2b
</style>
